<template>
    <div>
        <div>
            <p>电脑种类：<input type="text" v-model="name1"></p>
            <p><input type="button" @click="tianjia()" value="添加"></p>
        </div>
//-------------------------------------------------------------------------------------------
        <div>
            <p>电脑名称：<input type="text" v-model="name2"></p>
            <p>电脑价钱：<input type="text" v-model="price"></p>
            <p>显示器尺寸：<input type="text" v-model="size"></p>
            <p>处理器规格：<input type="text" v-model="guige"></p>
            <p>电脑图片：<input type="file" @change="ssl($event)"></p>
            <select v-model="ssa">
                <option v-for="(i,j) in classlist" :key="j" :value="i.id">{{i.name}}</option>
            </select>
            <p><input type="button" @click="tijiao()" value="提交"></p>
        </div>
//--------------------------------------------------------------------------------------------
        <div >
            <li  v-for="(x,y) in comlist" :key="y">{{x.name}}</li>
            <button @click="shangyiye()">上一页</button>
            <!-- <button v-for="(a,b) in fylist" :key="b" :value="a.id"></button> -->
            <button @click="xiayiye()">下一页</button>
        </div>
//-------------------------------------------------------------------------------------------
        <div>
            <p><button v-for="(k,l) in classlist" :key="l" :value="k.id" @click="fenlei(k.id,k.name)">{{k.name}}{{k.id}}</button></p>
            <h2>{{str}}电脑分类</h2>
            <li  v-for="(h,l) in fencomlist" :key="l">{{h.name}}</li>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import {RI_class_add,RI_class_show,RI_com_show,RI_com_sw} from '../axios_send/api.js'
export default {
    name:"class1",
    data(){
        return{
            name1:"",
            name2:"",
            price:"",
            size:"",
            guige:"",
            ssa:"",
//--------------------------------------------
            classlist:"",
            comlist:"",
            fylist:"",
            p:1,
            page_info:"",
//-------------------------------------------
            klk:"",
            clalist:"",
            fencomlist:"",
            sss:"",
            str:"",


        }
    },
    methods:{
        tianjia(){
            var data={"name":this.name1}
            RI_class_add(data)
            .then(res=>{
                console.log(res)
            })
        },
        tijiao(){
            var form_data = new FormData()
            form_data.append("name",this.name2)
            form_data.append("price",this.price)
            form_data.append("size",this.size)
            form_data.append("img",this.file)
            form_data.append("guige",this.guige)
            form_data.append("ssa",this.ssa)
            console.log(form_data);
            
            axios({
                url:"http://127.0.0.1:8000/ces/comadd/",
                method:"post",
                data:form_data
            }).then(res=>{
                console.log(res)
            })
        },
        cla_sss(){
            RI_class_show()
            .then(res=>{
                console.log(res)
                this.classlist =res.data
            })
        },
        ssl(event){
            this.file = event.target.files[0]
        },
        com_show(){
            var data={"page":this.p}
            RI_com_show(data)
            .then(res=>{
                console.log(res)
                this.fylist= res.fylist
                this.page_info = res.page_info,
                this.comlist =res.data
            })
        },
        shangyiye(){
            if(this.p>1){
                this.p -= 1
                this.com_show()
            }else{
                this.p = 1
                this.com_show()
            }
        },
        xiayiye(){
            if(this.p>=this.page_info){
                this.p += 1
                this.com_show()
            }else{
                this.p = this.page_info
                this.com_show()
            }
        },
        fenlei(id,name){
            console.log(id);
            
            RI_com_sw(id)
            .then(res=>{
                console.log(res)
                this.fencomlist =res.data
                this.str = name
            })
        }
    },
    created(){
        this.cla_sss()
        this.com_show()
        // this.fenlei()
    }
}
</script>

<style>

</style>
